<template>
  <div class="wrap">
    <div class="head-bar">
      <home-header />
    </div>
    <div class="main">
      <div class="left-menu" :class="{'active-left' : isCollapse}">
        <left-menu @collapse="collapse" />
      </div>
      <div class="right-page" :class="{'active-right' : isCollapse}">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
  import HomeHeader from "@/components/HomeHeader"
  import LeftMenu from "@/components/LeftMenu"
  export default {
    name: "Index",
    components: {
      HomeHeader, LeftMenu
    },
    data(){
      return {
        isCollapse: false
      }
    },
    methods: {
      collapse(isCollapse) {
        this.isCollapse = isCollapse;
      }
    }
  }
</script>

<style scoped lang="less">
  .wrap{
    height: 100%;
    .head-bar{
      height: 94px;
    }
    .main{
      height: calc(100% - 94px);
      display: flex;
      .left-menu{
        width: 250px;
        transition: all 0.3s;
      }
      .right-page{
        width: calc(100% - 250px);
        box-sizing: border-box;
        padding: 15px;
        border: 10px solid #e2eaed;
        overflow: auto;
        transition: all 0.3s;
      }
      .active-left{
        width: 64px;
      }
      .active-right{
        width: calc(100% - 64px);
      }
    }
  }
</style>
